<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">
      <div>

        <el-select v-model="listQuery.salesman" placeholder="请选择业务员" class="filter-item" style="width: 130px" @change="handleSearch">
          <el-option v-for="item in sales_options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-input v-model="listQuery.keyword" class="filter-item" placeholder="售后流水号 | 联系人 | 微信昵称 | 联系人手机" clearable style="width:320px;" @input="handleSearch" />

        <el-select v-model="listQuery.state" class="filter-item" placeholder="状态" style="width:130px" @change="handleSearch">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-date-picker
          v-model="datetime"
          range-separator="至"
          start-placeholder="创建开始时间"
          end-placeholder="创建结束时间"
          type="daterange"
          :picker-options="pickerOptions"
          :default-time="['00:00:00']"
          value-format="yyyy-MM-dd"
          class="filter-item"
          @change="handleSearch"
        />

        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>

        <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCreate">新增</el-button>

        <el-tag>已退款未退货金额：{{ unreceived_amount }}</el-tag>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="售后流水号" size="mini" prop="id" align="center" width="150">
        <template slot-scope="{row}">
          <el-link type="primary" @click="getDetail(row)">{{ row.id }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="买家名称" width="140px">
        <template slot-scope="{row}">
          <el-image
            style="width: 40px; height: 40px;"
            :src="row.owner.profile.avatar_url"
          />
          <div>{{ row.owner.profile.nick_name }}</div>
        </template>
      </el-table-column>
      <el-table-column label="售后退回列表">
        <template slot-scope="{row}">
          <div v-for="item in row.items" :key="item.id">
            <el-tag effect="plain" type="danger" v-if="item.return_state == 'RETURNING'">待退回</el-tag>
            <el-tag effect="plain" type="success" v-if="item.return_state == 'RETURNED'">已退回</el-tag>
            <span>{{ item.product.product_name + ' ' + item.product.item_name }}</span>
            <span style="color:red;margin-left:10px;">x{{ item.quantity }}</span>
            <span style="color:red;margin-left:10px;">小计￥{{ item.subtotal }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="退款总额" width="120">
        <template slot-scope="{row}">
          <div>{{row.amount}}</div>
        </template>
      </el-table-column>

      <el-table-column label="已退金额" width="120">
        <template slot-scope="{row}">
          <div>{{row.returned_amount}}</div>
        </template>
      </el-table-column>

      <el-table-column label="极速退款" width="120">
        <template slot-scope="{row}">
          <div>{{row.credit_amount}}</div>
        </template>
      </el-table-column>

      <el-table-column label="待退金额" width="120">
        <template slot-scope="{row}">
          <div>{{row.amount - row.returned_amount}}</div>
        </template>
      </el-table-column>

      <el-table-column label="发起时间" align="center" width="130">
        <template slot-scope="{row}">
          {{ row.created_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80px" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.state === 'RETURNING'" type="warning" effect="dark">待退回</el-tag>
          <el-tag v-if="row.state === 'FINISHED'" type="success" effect="dark">已完成</el-tag>
          <el-tag v-if="row.state === 'CLOSED'" type="danger" effect="dark">已关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{row}">
          <el-button v-if="row.state === 'RETURNING'" type="danger" size="mini" @click="handleCloseOrder(row)">关闭</el-button>
          <el-button v-if="row.state === 'RETURNING'" type="success" size="mini" @click="getDetail(row)">入库</el-button>
          <el-button v-if="row.state === 'FINISHED'" type="primary" size="mini" @click="getDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-drawer
      direction="ttb"
      title="售后详情"
      size="90%"
      :visible.sync="orderVisible"
    >
     <div class="newForm" style="overflow-y: auto;height: 600px;">
         <div class="filter-container">
           <el-button class="filter-item" type="primary" @click="saveOrder">
             保存
           </el-button>
         </div>
         <el-form ref="dataForm" label-position="left" v-if="dto">
           <el-table :data="[dto]" border>
             <el-table-column label="售后单编号">
               <template slot-scope="{row}">
                 <el-link>{{row.id}}</el-link>
               </template>
             </el-table-column>
             <el-table-column label="买家">
               <template slot-scope="{row}">
                 <div style="display: flex;align-items: center;">
                   <el-image
                     style="width: 40px; height: 40px;margin-right: 10px;"
                     :src="row.owner.profile.avatar_url"
                   />
                   {{ row.owner.profile.nick_name }}
                 </div>
               </template>
             </el-table-column>
             <el-table-column label="售后状态">
               <template slot-scope="{row}">
                 <el-tag v-if="row.state === 'RETURNING'" type="warning" effect="dark">待退回</el-tag>
                 <el-tag v-if="row.state === 'FINISHED'" type="success" effect="dark">已完成</el-tag>
                 <el-tag v-if="row.state === 'CLOSED'" type="danger" effect="dark">已关闭</el-tag>
               </template>
             </el-table-column>
           </el-table>
           <el-table :data="[dto]" border>
             <el-table-column label="退货总额">
               <template slot-scope="{row}">
                 <el-link>{{row.amount}}</el-link>
               </template>
             </el-table-column>
             <el-table-column label="已退金额">
               <template slot-scope="{row}">
                 <el-link>{{row.returned_amount}}</el-link>
               </template>
             </el-table-column>
             <el-table-column label="极速退款">
               <template slot-scope="{row}">
                 <el-link>{{row.credit_amount}}</el-link>
               </template>
             </el-table-column>
           </el-table>
           <el-table :data="[dto]" border>
             <el-table-column label="发起时间">
               <template slot-scope="{row}">
                 {{ row.created_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
               </template>
             </el-table-column>
             <el-table-column label="完成时间">
               <template slot-scope="{row}">
                 <div v-if="row.finished_at">{{ row.finished_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}</div>
               </template>
             </el-table-column>
             <el-table-column label="关闭时间">
               <template slot-scope="{row}">
                 <div v-if="row.closed_at">{{ row.closed_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}</div>
               </template>
             </el-table-column>
           </el-table>
           <el-table
             :data="dto.items"
             border
             style="width: 100%; margin-top: 10px; margin-bottom: 20px"
           >
             <el-table-column label="退回货物" size="mini" align="left">
               <template slot-scope="{row}">
                 <el-link>{{row.product.product_name}}</el-link>
               </template>
             </el-table-column>
             <el-table-column label="规格" size="mini" align="left" width="280">
               <template slot-scope="{row}">
                 <el-link>{{row.product.item_name}}</el-link>
               </template>
             </el-table-column>
             <el-table-column label="数量" prop="quantity" align="left" width="80">
             </el-table-column>
             <el-table-column label="小计" prop="subtotal" align="left" width="80">
             </el-table-column>
             <el-table-column label="是否入库"align="center" width="100">
               <template slot-scope="{row,$index}">
                 <el-switch
                   v-model="row.return_state"
                   active-value="RETURNED"
                   inactive-value="RETURNING"
                   active-color="#13ce66"
                   inactive-color="#ff4949"
                   :disabled="dto_.items[$index].return_state == 'RETURNED'"
                 >
                 </el-switch>
               </template>
             </el-table-column>
           </el-table>
         </el-form>
       </div>
    </el-drawer>

    <el-drawer
      direction="rtl"
      title="新增售后单"
      size="80%"
      :visible.sync="addVisible"
    >
      <div class="newForm">
        <div class="user">
          <div v-if="user" class="name">
            <el-avatar :src="user.profile.avatar_url"></el-avatar><span><el-link type="primary">{{user.profile.nickname}}</el-link></span>
          </div>
          <el-button type="primary" plain @click="pickUser">{{user ? '重新选择' : '请选择客户'}}</el-button>
          <el-button type="primary" @click="createOrder">保存</el-button>
        </div>
        <el-table
          :data="tableList"
          border
          highlight-current-row
          size="mini"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          >
          </el-table-column>

          <el-table-column
            label=""
            width="80"
            align="center"
          >
            <template scope="{row,$index}">
              <el-tag type="success" effect="dark" size="mini" @click="addLine($index)">+</el-tag>
              <el-tag type="danger" effect="dark" size="mini" @click="removeLine($index)">-</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="name"
            label="名称"
          >
            <template slot-scope="{row,$index}">
              <el-link :type="row.item_id ? 'primary' : 'info'" @click="pickItem($index)">{{row.name ? row.name : '点击选择'}}</el-link>
            </template>
          </el-table-column>

          <el-table-column
            prop="price"
            label="单价"
            width="120"
            align="center"
          >
            <template slot-scope="{row,$index}">
              <el-input v-model="row.price" @input="updateTotal($index)"></el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="quantity"
            label="数量"
            width="120"
            align="center"
          >
            <template slot-scope="{row,$index}">
              <el-input v-model="row.quantity" @input="updateTotal($index)"></el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="total"
            label="小计"
            width="120"
            align="center"
          >
          </el-table-column>

        </el-table>
      </div>
    </el-drawer>

    <item-picker ref="item_picker" @onSelectConfirm="onSelectConfirm"></item-picker>

    <user-picker ref="user_picker" @onSelectUserConfirm="onSelectUserConfirm"></user-picker>

  </div>
</template>
